<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <style>
        #clickToChange {
            color: #4494ff;
            text-decoration: underline;
        }
    </style>
</head>
<body>

<hr>

<div>
    <table cellpadding="5">
        <tr>
            <th valign="top">注册邮箱:</th>
            <td>
                <input type="text"><br>
                你还可以手机注册
            </td>
        </tr>

        <tr>
            <th>
                创建密码:
            </th>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <th>真实姓名:</th>
            <td><input type="text"></td>
        </tr>

        <tr>
            <th align="right">性别:</th>
            <td>
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
            </td>
        </tr>

        <tr>
            <th align="right">生日:</th>
            <td>
                <select name="year" id="selectYear" onchange="getDay()">
                </select>
                年
                <select name="month" id="selectMonth" onchange="getDay()">
                </select>
                月
                <select name="day" id="selectDay">
                </select>
                日
            </td>
        </tr>

        <tr>
            <th align="right">我正在:</th>
            <td>
                <select name="doSomething">
                    <option value="">睡觉</option>
                    <option value="" selected>吃饭</option>
                    <option value="">拉屎</option>
                    <option value="">上课</option>
                    <option value="">游戏</option>
                </select>
            </td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img src="./1111.png" alt="验证码" id="verifyCodeImg">
                <span onclick="changeVerifyCode()" id="clickToChange">&nbsp;看不清楚，换一张</span>
            </td>
        </tr>

        <tr>
            <th align="right">验证码:</th>
            <td><input type="text" id="userVerifyCode"></td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img src="./btn_reg.gif" alt="立即注册" onclick="verifyUserInput()">
            </td>
        </tr>
    </table>
</div>


<script>
    function initSelect() {
        var selectYearNode = document.getElementById('selectYear');
        for (var i = 2021; i >= 1949; i--) {
            var optionElement = document.createElement('option');
            optionElement.innerText = i;
            selectYearNode.appendChild(optionElement);
        }

        var selectMonthNode = document.getElementById('selectMonth');
        for (var i = 1; i <= 12; i++) {
            var optionElement = document.createElement('option');
            if (i < 10) {
                optionElement.innerText = '0' + i;
            } else {
                optionElement.innerText = i;
            }
            selectMonthNode.appendChild(optionElement);
        }

        printDay(31);

    }

    initSelect();

    // 监控 年+月 改变对应的day
    function getDay() {
        var year = document.getElementById('selectYear').value;
        var month = document.getElementById('selectMonth').value;

        if (month == 4 || month == 6 || month == 9 || month == 11) {
            printDay(30)
        } else if (month == 2) {
            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                printDay(29)
            } else
                printDay(28)
        } else {
            printDay(31)
        }
        return;
    }

    // 打印日期
    function printDay(dayNumber) {
        var selectDayNode = document.getElementById('selectDay');
        selectDayNode.innerText = '';
        for (var i = 1; i <= dayNumber; i++) {
            var optionElement = document.createElement('option');
            if (i < 10) {
                optionElement.innerText = '0' + i;
            } else {
                optionElement.innerText = i;
            }
            selectDayNode.appendChild(optionElement);
        }
    }


    // 验证码图片list
    list = [1111, 1234, 2222, 3333, 4567];
    var preIndex = 0;

    // 更改验证码图片
    function changeVerifyCode() {
        // 随机获取新的验证码，并保证与上次不同
        var currIndex = Math.floor(Math.random() * list.length);
        while (currIndex == preIndex) {
            currIndex = Math.floor(Math.random() * list.length);
        }
        preIndex = currIndex;
        // 替换img属性
        var codeImgNode = document.getElementById('verifyCodeImg');
        codeImgNode.src = "./" + list[currIndex] + ".png";
    }

    // 判断验证码是否正确
    function verifyUserInput() {
        // preIndex变量即为当前验证码 (不能通过src来获取code，因为浏览器会拼接url)
        var code = list[preIndex];
        // 获取用户输入的验证码
        var inputCodeNode = document.getElementById('userVerifyCode');
        var inputCode = parseInt(inputCodeNode.value);
        // 比较两个字符串是否相等
        if (code==inputCode){
            alert("sign up success!")
        } else{
            alert("verify code fail!")
        }
        inputCodeNode.value = "";
    }
</script>
</body>
</html>